import _ from "lodash";
import React from "react";
import AppList from "./List";
import { Button, Modal } from "antd";
import { WeaTop, WeaTab, WeaLocaleProvider, WeaLeftRightLayout, WeaUpload } from "ecCom";
import { inject, observer } from "mobx-react";
import { appStatus } from "../../constants/app";
import NewOrEditDialog from "./dialog/NewOrEdit";
import ShareAppDialog from "./dialog/ShareApp";
import NewTaskDialog from "./dialog/NewTask";
import AppGroupDialog from "./dialog/NewAppGroup";
import PublishingDialog from "../designer/form/dialog/publish";
import AppGroupList from "./AppGroupList";
import CopyAppDialog from "./dialog/CopyAppDialog";
const getLabel = WeaLocaleProvider.getLabel;

import "./index.less";
const { NEW, DELETE, EDIT } = appStatus;

@inject('edcAppStore', 'edcAppFormStore')
@observer
export default class App extends React.Component {
  constructor(props) {
    super();

    this.store = props.edcAppStore;
    this.formStore = props.edcAppFormStore;

    this.onDelete = this.onDelete.bind(this);
    this.onDropMenuClick = this.onDropMenuClick.bind(this);
    this.onSearchChange = _.debounce(this.store.onSearchTextChange, 300);
  }

  componentDidMount() {
    this.formStore.init().then(() => {
      const { fillinTypes } = this.formStore;

      this.store.onTypesChange(fillinTypes);
    });

    this.store.init();
  }

  componentWillReceiveProps(nextProps) {
    const { location: { key } } = this.props;
    const { location: { key: nextKey } } = nextProps;
    if (key !== nextKey) {
      this.store.init();
    }
  }

  onDropMenuClick(key) {
    switch (key) {
      case NEW:
        return this.store.showNewDialog();
      case DELETE:
        return this.onDelete();
      default:
        break;
    };
  }

  onDelete() {
    const { onDelete } = this.store;

    Modal.confirm({
      title: getLabel('385164', '删除应用'),
      content: <span>{getLabel('502752', '确认删除选中的应用吗?')}</span>,
      onOk: onDelete
    });
  }

  getBtns() {
    let btns = [];
    const { appids, createRight, showNewDialog, exportApp,getShowListDatas } = this.store;
    const disabled = !appids.length;
    if (createRight) btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@pc3asd@create`} type='primary' onClick={showNewDialog}>{getLabel(365, '新建')}</Button>);
    btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@50r2xv@delete`} type='ghost' disabled={disabled} onClick={this.onDelete}>{getLabel(502286, '删除')}</Button>);
    if (createRight) btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@1j397e@export`} type='ghost' disabled={disabled} onClick={exportApp}>{getLabel(502294,'导出')}</Button>);
    if (false) btns.push(<WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@2v8za0@`}
      uploadUrl="/api/edc/app/uploadApp"
      category='string'
      maxUploadSize={0}
      maxFilesNumber={1}
      
      limitType='zip'
      autoUpload={true}
      //getShowListDatas={getShowListDatas}
      onUploading={status => getShowListDatas(status)}
  >
  <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ws9l21@import`} type="ghost">{getLabel('32935','导入')}</Button>
  
  </WeaUpload>);

    return btns;
  }

  getDropMenuDatas() {
    let dropMenuDatas = [];
    const { appids, createRight, notMine } = this.store;
    const disabled = !appids.length;
    if (createRight) dropMenuDatas.push({ key: NEW, icon: <i className='icon-coms-plus' />, content: getLabel(365, '新建') });
    dropMenuDatas.push({ key: DELETE, icon: <i className='icon-coms-delete' />, content: getLabel(502286, '删除'), disabled });

    return dropMenuDatas;
  }

  render() {
    const {
      loading, status, editableApp, publishApp, types,
      counts, selectedType, searchText, publishDialogVisible, hidePublishDialog,
      onSelectedTypeChange, onNewOrEdit, hideDialog,myGroups,notMine,selectedGroupType,canCreated,createType
    } = this.store;
    const visible = status === EDIT || status === NEW;
    const publishId = publishApp.id ? publishApp.id : '';
    return (
      <div className='wea-edc-container'>
        <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@r8r4vv`}
          title={getLabel('502753', '我的填报应用')}
          iconBgcolor='#1a57a0'
          icon={<i className="icon-coms02-Data-center" />}
          showDropIcon={true}
          loading={loading}
          buttons={this.getBtns()}
          dropMenuDatas={this.getDropMenuDatas()}
          onDropMenuClick={this.onDropMenuClick}
        >
          <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@6x00w4`}
            leftWidth={250}
            leftCom={<AppGroupList ecId={`${this && this.props && this.props.ecId || ''}_AppGroupList@ncjtav`} store={this.store} />}
          >
            <div className='wea-edc-right-content'>
              <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@rwzq8u`}
                datas={types}
                counts={counts}
                keyParam="key"
                countParam="key"
                searchType={['base']}
                selectedKey={selectedType}
                searchsBaseValue={searchText}
                onChange={onSelectedTypeChange}
                onSearchChange={this.onSearchChange.bind(this)}
              />
              <div className='edc-app-list'>
                <AppList ecId={`${this && this.props && this.props.ecId || ''}_AppList@4i4slg`} />
              </div>
            </div>
          </WeaLeftRightLayout>
          {!visible ? null :
            <NewOrEditDialog ecId={`${this && this.props && this.props.ecId || ''}_NewOrEditDialog@voytj0`}
              app={editableApp}
              myGroups ={myGroups}
              notMine = {notMine}
              selectedGroupType = {selectedGroupType}
              createType = {createType}
              visible={visible}
              onCancel={hideDialog}
              canCreated={canCreated}
              onOk={onNewOrEdit}
              fillinType={selectedType}
            />
          }
          <NewTaskDialog ecId={`${this && this.props && this.props.ecId || ''}_NewTaskDialog@j9kq7p`} store={this.store} />
          <AppGroupDialog ecId={`${this && this.props && this.props.ecId || ''}_AppGroupDialog@eeld6s`} store={this.store} />
          <ShareAppDialog ecId={`${this && this.props && this.props.ecId || ''}_ShareAppDialog@3x2iur`} store={this.store} />
          <CopyAppDialog ecId={`${this && this.props && this.props.ecId || ''}_CopyAppDialog@o85511`} store={this.store} />
          {
            publishId &&
            <PublishingDialog ecId={`${this && this.props && this.props.ecId || ''}_PublishingDialog@9n3pih`}
              appid={publishId}
              publishApp={publishApp}
              visible={publishDialogVisible}
              onOk={hidePublishDialog}
              onCancel={hidePublishDialog}
            />
          }
        </WeaTop>
      </div>
    );
  }
}